/**
 * Copyright 2022 Google LLC
 *
 * Licensed under the Apache License, Version 2.0 (the "License");
 * you may not use this file except in compliance with the License.
 * You may obtain a copy of the License at
 *
 *      http://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing, software
 * distributed under the License is distributed on an "AS IS" BASIS,
 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 * See the License for the specific language governing permissions and
 * limitations under the License.
 */

@import 'vars';
@import 'mixins';

.history-item-container {
  cursor: pointer;
  overflow: hidden;

  &.is-selected {
    background: rgba($theme-blue, .2);
    border: 2px solid rgba($theme-blue, .8);
  }
}

.history-item {
  height: 48px;
  line-height: 47px;
  user-select: none;
}

.history-item-name-container {
  flex-grow: 1;
  line-height: initial;
  min-width: 0;  // See https://css-tricks.com/flexbox-truncated-text/
}

.history-item-name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

@mixin status-text {
  color: $text-grey;
  font-size: $font-size-small;
  padding: 10px 0;
  text-align: center;
}

.history-item-status {
  @include status-text;
  margin-left: 15px;
  margin-right: -15px;
  min-width: 100px;
}

.status-text {
  @include status-text;
}
